@import 'config';
.panel-input{
	display: flex;
	align-items: center;
	border: px2rem(1px) solid $light;
	border-width: px2rem(1px) 0;
	background-color: $white;
	margin-bottom: px2rem(-1px);
	&.form-group-stl2{
		padding: 0 px2rem(30px);
		border: none;
		background-color: transparent;
	}
	.label-title{
		flex: 0 0 px2rem(80px);
		width: px2rem(80px);
		height: px2rem(40px);
		margin-left: px2rem(20px);
		font-size: px2rem(12px);
		line-height: px2rem(40px);
		color: $dark;
	}
	.input{
		flex: 1;
		padding: px2rem(13px) 0;
		height: px2rem(14px);
		line-height: px2rem(14px);
		border: none;
		color: $black;
		outline: none;
		font-size: px2rem(12px);
		background-color: transparent;
		&::placeholder{
			color: $black;
			// color: darken($gray, 20%);
		}
	}
	.textarea{
		flex: 1;
		background-color: transparent;
		border: none;
		color: $primary;
	}
	.sms-code{
		align-content: stretch; 
		height: px2rem(18px);
		line-height: px2rem(18px);
		font-size: px2rem(12px);
		padding: 0 px2rem(10px);
		border: px2rem(1px) solid darken($light, 3%);
		border-radius: px2rem(9px);
		color: $dark;
		background-color: $light;
		&.blue{
			color: $white;
			border-color: lighten(mix($blue,$green, 40%), 20%);
			background-color: lighten(mix($blue,$green, 40%), 20%);
		}
	}
	.ift-ok{
		color: $gray;
		margin-right: px2rem(4px);
		font-size: px2rem(20px);
		vertical-align: middle;
		&.checked{
			color: lighten(mix($blue,$green, 40%), 20%);
		}
	}
}

.form-auto{
	height: auto;
	padding-top: px2rem(8px);
	padding-bottom: px2rem(8px);
	align-items: flex-start;
	.label-title{
		line-height: px2rem(22px);
	}
	.textarea{
		line-height: px2rem(20px);
		min-height: px2rem(60px);
	}
}

.form-btn{
	width: 100%;
	height: px2rem(40px);
	line-height: px2rem(40px);
	border: none;
	font-size: px2rem(16px);
	text-align: center;
	color: $white;
	background-color: $auxiliary;
	border-radius: px2rem(20px);
	outline: none;
}

.attr-checked{
  font-size: 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content:flex-start;
  &>.item{
  	width: 31%;
  	margin-bottom: px2rem(10px);
  	margin-right: 3.5%;
    font-size: px2rem(12px);
    &:nth-child(3n){
    	margin-right: 0;
    }
    .text{
      display: block;
      height: px2rem(20px);
      padding: px2rem(4px) px2rem(9px);
      border: px2rem(1px) solid $gray;
      line-height: px2rem(20px);
      text-align: center;
      color: $dark;
      border-radius: px2rem(15px);
      cursor: pointer;
    }
    input[type="radio"]:checked + .text, input[type="checkbox"]:checked + .text{
      color: $primary;
      border-color: $primary;
      filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=0);
      -webkit-filter: grayscale(0%);
      opacity: 1;
    }
    input{
      display: none;
    }
  }
}

.address-tags{
	padding: px2rem(10px);
	&>.title{
		height: px2rem(40px);
		line-height: px2rem(40px);
		font-size: px2rem(12px);
		color: $dark;
	}
}
.btn{
	display: block;
	margin: px2rem(20px) px2rem(10px);
	height: px2rem(40px);
	line-height: px2rem(40px);
	font-size: px2rem(14px);
	text-align: center;
	background-color: $gray;
	color: $white;
	border-radius: px2rem(2px);
}
.btn-red {
	background-color: $red;
}
.btn-primary {
	background-color: $primary;
}




